<template>
    <div class="log">
         <div class="breadcrumb">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
            <el-breadcrumb-item>UserManagement</el-breadcrumb-item>
            <el-breadcrumb-item>UserLog</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="fl seach">
            <el-input placeholder="Please enter the content" v-model="searchVal" class="search-input" @keydown.enter.native="handleSearch" @input="handleData">
                <!-- 点击搜索按钮执行搜索的方法，将获取回来的数据赋值给tableData -->
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
        </div>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            >
            <el-table-column
            type="index"
            width="50"
            >
            </el-table-column>
            <el-table-column
            prop="username"
            label="UserName"
            width="180">
            </el-table-column>
            <el-table-column
            prop="type"
            label="Type"
            width="260">
            </el-table-column>
            <el-table-column
            prop="loginTime"
            label="LoginTime">
            </el-table-column>
            <el-table-column
            label="Operation">
                <template slot-scope="scope">
                    <el-button
                        icon="el-icon-delete"
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">
                        Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalNum"
            :current-page="currentPage"
            :page-size="pageSize">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {Meteor} from 'meteor/meteor';
import {UserLog} from '/imports/collections/collection'
export default {
    data () {
        return {
            searchVal:'',  //搜索的值
            tableData: [],
            newTable:[],
            totalNum:0,     //数据总条数，默认为0
            currentPage:1,    //默认展示第一页
            pageSize:6 ,       //页面显示的数据条数
            pageNum:1         //当前页码默认为1
        }
    },
    methods: {
        handleData(){
            this.initList();
        },
        // 搜索登录的用户
        handleSearch(){
            // 查找之前将页码重置为第一页
            this.pageNum=1;
            var id=[];
            for(var i=0;i<UserLog.find().count();i++){
                if(UserLog.find({}).fetch()[i].username.indexOf(this.searchVal.trim())!=-1){
                id.push(UserLog.find({}).fetch()[i]._id)
                }
            }
            var newTableData=[]
            // 循环找出要查找的对象
            for(var i=0;i<this.tableData.length;i++){
                for(var j=0;j<id.length;j++){
                    if(this.tableData[i]._id===id[j]){
                    newTableData.push(this.tableData[i])
                    }
                }
            }
            this.tableData=[]
            // console.log(newTableData)
            for(var j=0;j<newTableData.length;j++){
                this.tableData.push(newTableData[j]);
            }
        },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.tableData=[]
        this.pageNum=val;
        var UserLogData=UserLog.find().fetch();
        if(val!==1){
            for(var i=(val-1)*this.pageSize;i<(val*this.pageSize) && (UserLogData.length);i++){
                this.tableData.push(UserLogData[i])
            }
            if((val*this.pageSize+1)>UserLogData.length){
                this.tableData=[];
                for(var i=(val-1)*this.pageSize;i<(UserLogData.length);i++){
                this.tableData.push(UserLogData[i])
            }
            }
        }else if(val==1){
            this.initList();
        }
        },
        // 删除按钮
        handleDelete(row){
            this.$confirm('This action will permanently delete the user log. Do you want to continue?', 'Tips', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            // this.tableData.splice(row,1);
            // UserList.remove({'_id':row._id});
            // 删除用户
           UserLog.remove({_id:row._id});
            // console.log("删除成功后:"+Meteor.Right.find().fetch());
            if(this.pageNum>1){
                this.handleCurrentChange(this.pageNum)
              }else{
                this.initList();
              }
            this.$message({
              type: 'success',
              message: 'Successful deletion!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: 'Canceled deletion'
            });          
          });
        },
        // 列表初始化
        initList(){
            // this.tableData=UserLog.find().fetch();
            this.totalNum=UserLog.find().count();
            var UserLogData=UserLog.find().fetch();
            // for(var i=0;i<UserLogData.length;i++){
            //     if(i<this.pageSize){
            //         this.tableData.push(UserLogData[i])
            //     }
            // }
           this.tableData=UserLogData;

            // UserLog.insert({
            //     username:'haha',
            //     loginTime:'2019-09-18 17:30',
            //     type:'test'
            // })
        }
    },
    created () {  
        var that=this;
        var timeout=setTimeout(function(){
            that.initList();
        },600)
    } 
            
}
</script>
<style lang="scss" >
.log{
     .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 70px;
          line-height: 70px;
          color: #333;
      }
      .el-table__body tr,
      .el-table__body td {
          padding: 0;
          height: 50px;
      }
}
.header{
    height: 60px;
    width: 100%;
    background-color: #F2F2F4;
    line-height: 60px;
    margin-bottom: 30px;
}
.search{
    margin-left: 60px;
}
.pagination{
    margin-top: 30px;
}
.el-table th, .el-table tr{
    color: #000;
}
.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
 .breadcrumb{
    background-color: #fff;
    height:30px;
}
.el-breadcrumb{
    line-height: 30px;
    font-size: 14px;
    padding-left: 10px;
}   
</style>


